<template>
  <div>
    <f-table ref="tableRef" @register="register">
      <template #header-left>
        <el-button type="primary" @click="handleSyncGroupUser">同步外部联系人</el-button>
        <el-button type="primary" @click="handleSyncRelation">同步关系</el-button>
      </template>
      <template #userinfo="{ row }">
        <div class="flex items-center">
          <el-avatar :src="row.avatar" :size="50"></el-avatar>
          <div class="flex-1 ml-[10px]">
            <p>{{t('table.nickname')}} <span>{{ row.name||'--' }}</span></p>
          </div>
        </div>
      </template>
      <template #action="{ row }">
        <el-space wrap>
            <el-button type="primary" text>{{ t('edit') }}</el-button>
            <el-button type="primary" text>{{ t('opt.sync') }}</el-button>
            <el-button type="primary" text>{{ t('opt.member') }}</el-button>
            <el-button type="primary" text>{{ t('delete') }}</el-button>
        </el-space>
      </template>
    </f-table>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { t } from '@/lang'
import FTable, { BasicColumn, useTable } from '@/addon/htscrm/components/f-table'
import { tableColumns, tableSearchFormItems } from '@/addon/htscrm/data/user.wechat-user'
import { getWechatUserListApi, wechatUserApi, wechatRelationApi } from '@/addon/htscrm/api'
import { dayjs, ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'

const route = useRoute()

const tableRef = ref()
const { methods, register } = useTable({
    rowKey: 'id',
    searchFromItems: tableSearchFormItems(t),
    columns: tableColumns(t) as BasicColumn<IUserItem>[],
    beforeFetch: (opt) => {
        // opt.id = route.query.id
        return opt
    },
    api: async (opt) => (await getWechatUserListApi(opt)).data
})

function formatDate (date: number) {
    return dayjs(date * 1000).format('YYYY-MM-DD HH:mm:ss')
}

async function handleSyncGroupUser (row:IWechatGroupItem) {
    await wechatUserApi({  })
    ElMessage.success('同步成功')
    methods.reload()
}

async function handleSyncRelation (row:IWechatGroupItem) {
    await wechatRelationApi({  })
    ElMessage.success('同步成功')
    methods.reload()
}

onMounted(() => {
})

</script>

<style lang="scss" scoped>

.avatar {
    width: 50px;
    height: 50px;
}
</style>
